<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>实时数据</title>
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../css/jkdpop-box.css">
    <link rel="stylesheet" href="../css/infopulish.css">
    <script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
    <script src="../js/home.js"></script>
    <style>
        .home-a5{color:#f15b3a }
        .jkd-li2 {
            background: url("../images/jkd-icon.png") no-repeat 5px 2px;
        }
        .jkd-li2 a{
            color: #f15b3a
        }
        .circle-all ul li{
            width: 120px;
            margin-left: 22.5px;
            margin-right: 22px;
        }
        .circle-in{
            width: 120px;
            height:120px;
            background-size: contain;
        }
        .basic-data{
            padding: 40px 0;
        }
        .basic-data ul li {
            height: 42px;
        }
        .program-data{
            height: 690px;
        }
    </style>
</head>
<body>
<div id="header"></div>
<!--实时数据-->
<div class="infopub-content wd12 mg0 mg-tobo">
    <!--侧边栏-->
    <div id="infopub-leftmenu"></div>
    <div class="my-jkd-con fl" style="box-shadow:none;">
        <div class="header-content">
            <img src="../images/nowdata/data.png"/>
        </div>
        <div style="clear: both"></div>
        <div class="back-g height60">
            <div class="protitle">
                <div class="progress margin"></div><p style="float: left">交易数据</p> <div class="round margin" style="margin-left: 11px;"></div> <div class="progress margin" style="width:20px;"></div>
            </div>
        </div>
        <div class="echars-data">
            <div class="turnover">
                <p class="number-style">3,043,577,900</p>
                <div class="h-line"></div>
                <p class="font-style">累计借贷金额（元）</p>
                <div id="main" class="main-chars"></div>
                <!-- ECharts单文件引入 -->
                <script src="../js/build/dist/echarts.js"></script>
                <script type="text/javascript">
                    // 路径配置
                    require.config({
                        paths: {
                            echarts: '../js/build/dist'
                        }
                    });

                    // 使用
                    require(
                            [
                                'echarts',
                                'echarts/chart/line',
                                'echarts/chart/bar'
                            ],
                            function (ec) {
                                var myChart = ec.init(document.getElementById('main'));

                                var months = ['2014-01','2015-04','2015-09','2016-03','2016-09','2017-07','2017-08'];
                                var deals = ['0.15','0.3','1','1.2','0.8','0.7','1'];

                       //         $.ajaxSettings.async = false;

                       //         $.getJSON(ctx+'/website/getMonthDeal',function(json){
                       //             months = json.months;
                       //             deals = json.deals;
                       //         });

                                var option = {
                                    grid:{
                                        height:'180',
                                    },
                                    tooltip : {
                                        trigger: 'yxis',
                                        seriesName: '金额',
                                    },// 显示y轴信息
                                    dataZoom: {
                                        show: true,
                                        start :0
                                    },/*设置滑动条*/
                                    axisTick : {    // 轴标记
                                        show:true,
                                        length: 10,
                                        lineStyle: {
                                            color: 'black',
                                            type: 'solid',
                                            width: 2
                                        }
                                    },
                                    calculable : false,
                                    grid: {
                                        borderWidth: 0,
                                        x:50,
                                        y: 80,
                                        x2:10,
                                        y2: 60
                                    },
                                    xAxis : [
                                        {
                                            type : 'category',
                                            position: 'bottom',
                                            boundaryGap: true,
                                            axisLine : {    // 轴线
                                                show: true,
                                                lineStyle: {
                                                    color: 'black',
                                                    type: 'solid',
                                                    width: 1
                                                }
                                            },
                                            axisTick : {    // 轴标记
                                                show:true,
                                                length: 3,
                                                lineStyle: {
                                                    color: 'black',
                                                    type: 'solid',
                                                    width: 1
                                                }
                                            },
                                            splitLine : {
                                                show:false,//x轴填充线条
                                                lineStyle: {
                                                    color: '#483d8b',
                                                    type: 'dashed',
                                                    width: 1
                                                }
                                            },
                                            data : months
                                        },

                                    ],
                                    yAxis : [
                                        {
                                            splitNumber:5,/*分段*/
                                            type : 'value',
                                            name : '',
                                            axisLabel : {
                                                formatter: '{value}亿'
                                            },
                                            axisLine : {    // 轴线
                                                show: true,
                                                lineStyle: {
                                                    color: 'black',
                                                    type: 'solid',
                                                    width: 1
                                                }
                                            },
                                            axisTick : {    // 轴标记
                                                show:true,
                                                length: 3,
                                                lineStyle: {
                                                    color: 'black',
                                                    type: 'solid',
                                                    width: 1
                                                }
                                            },
                                        },
                                        {
                                            show:false,//是否显示y轴
                                            type : 'value',
                                            name : '金额',
                                            axisLabel : {
                                                formatter: '{value}亿'
                                            }
                                        },
                                    ],


                                    series : [

                                        {
                                            name:'成交金额',
                                            type:'bar',
                                            barMaxWidth:20,
                                            itemStyle: {        // 系列级个性化样式，纵向渐变填充
                                                normal: {
                                                    color : (function (){
                                                        var zrColor = require('zrender/tool/color');
                                                        return zrColor.getLinearGradient(
                                                                0, 400, 0, 300,
                                                                [[0, '#5f6cb8'],[1, '#5f6cb8']]
                                                        )
                                                    })()
                                                },

                                                emphasis: {//划过显示
                                                    color: (function (){
                                                        var zrColor = require('zrender/tool/color');
                                                        return zrColor.getLinearGradient(
                                                                0, 400, 0, 300,
                                                                [[0, '#5f6cb8'],[1, '#535fa6']]
                                                        )
                                                    })(),
                                                }
                                            },
                                            data:deals

                                        },

                                        {
                                            name:'成交金额',
                                            type:'line',
                                            itemStyle: {        // 系列级个性化样式，纵向渐变填充
                                                normal: {
                                                    color : (function (){
                                                        var zrColor = require('zrender/tool/color');
                                                        return zrColor.getLinearGradient(
                                                                0, 400, 0, 300,
                                                                [[0, '#5f6cb8'],[1, '#5f6cb8']]
                                                        )
                                                    })()
                                                },

                                            },
                                            data:deals
                                        }
                                    ]
                                };
                                // 为echarts对象加载数据
                                myChart.setOption(option);
                            }
                    );
                </script>
                <!--end-->
                 <p class="font-down">每月借贷金额（元）</p>
            </div>
            <div class="turnover">
                <p class="number-style">3,043,577,900</p>
                <div class="h-line"></div>
                <p class="font-style">用户累计收益（元）</p>
                <div id="main2" class="main-chars"></div>
                <!-- ECharts单文件引入 -->
                <script type="text/javascript">
                    // 路径配置
                    require.config({
                        paths: {
                            echarts: '../js/build/dist'
                        }
                    });

                    // 使用
                    require(
                            [
                                'echarts',
                                'echarts/chart/line',
                                'echarts/chart/bar'
                            ],
                            function (ec) {
                                var myChart = ec.init(document.getElementById('main2'));

                                var months = ['2014-01','2015-04','2015-09','2016-03','2016-09','2017-07','2017-08'];
                                var deals = ['0.15','0.3','1','1.2','0.8','0.7','1'];

                                //         $.ajaxSettings.async = false;

                                //         $.getJSON(ctx+'/website/getMonthDeal',function(json){
                                //             months = json.months;
                                //             deals = json.deals;
                                //         });

                                var option = {
                                    grid:{
                                        height:'180',
                                    },
                                    tooltip : {
                                        trigger: 'yxis',
                                        seriesName: '金额',
                                    },// 显示y轴信息
                                    dataZoom: {
                                        show: true,
                                        start :0
                                    },/*设置滑动条*/
                                    axisTick : {    // 轴标记
                                        show:true,
                                        length: 10,
                                        lineStyle: {
                                            color: 'black',
                                            type: 'solid',
                                            width: 2
                                        }
                                    },
                                    calculable : false,
                                    grid: {
                                        borderWidth: 0,
                                        x:70,
                                        y: 80,
                                        x2:10,
                                        y2: 60
                                    },
                                    xAxis : [
                                        {
                                            type : 'category',
                                            position: 'bottom',
                                            boundaryGap: true,
                                            axisLine : {    // 轴线
                                                show: true,
                                                lineStyle: {
                                                    color: 'black',
                                                    type: 'solid',
                                                    width: 1
                                                }
                                            },
                                            axisTick : {    // 轴标记
                                                show:true,
                                                length: 3,
                                                lineStyle: {
                                                    color: 'black',
                                                    type: 'solid',
                                                    width: 1
                                                }
                                            },
                                            splitLine : {
                                                show:false,//x轴填充线条
                                                lineStyle: {
                                                    color: '#483d8b',
                                                    type: 'dashed',
                                                    width: 1
                                                }
                                            },
                                            data : months
                                        },

                                    ],
                                    yAxis : [
                                        {
                                            splitNumber:5,/*分段*/
                                            type : 'value',
                                            name : '',
                                            axisLabel : {
                                                formatter: '{value}百万'
                                            },
                                            axisLine : {    // 轴线
                                                show: true,
                                                lineStyle: {
                                                    color: 'black',
                                                    type: 'solid',
                                                    width: 1
                                                }
                                            },
                                            axisTick : {    // 轴标记
                                                show:true,
                                                length: 3,
                                                lineStyle: {
                                                    color: 'black',
                                                    type: 'solid',
                                                    width: 1
                                                }
                                            },
                                        },
                                        {
                                            show:false,//是否显示y轴
                                            type : 'value',
                                            name : '金额',
                                            axisLabel : {
                                                formatter: '{value}百万'
                                            }
                                        },
                                    ],


                                    series : [

                                        {
                                            name:'成交金额',
                                            type:'bar',
                                            barMaxWidth:20,
                                            itemStyle: {        // 系列级个性化样式，纵向渐变填充
                                                normal: {
                                                    color : (function (){
                                                        var zrColor = require('zrender/tool/color');
                                                        return zrColor.getLinearGradient(
                                                                0, 400, 0, 300,
                                                                [[0, '#5f6cb8'],[1, '#5f6cb8']]
                                                        )
                                                    })()
                                                },

                                                emphasis: {//划过显示
                                                    color: (function (){
                                                        var zrColor = require('zrender/tool/color');
                                                        return zrColor.getLinearGradient(
                                                                0, 400, 0, 300,
                                                                [[0, '#5f6cb8'],[1, '#535fa6']]
                                                        )
                                                    })(),
                                                }
                                            },
                                            data:deals

                                        },

                                        {
                                            name:'成交金额',
                                            type:'line',
                                            itemStyle: {        // 系列级个性化样式，纵向渐变填充
                                                normal: {
                                                    color : (function (){
                                                        var zrColor = require('zrender/tool/color');
                                                        return zrColor.getLinearGradient(
                                                                0, 400, 0, 300,
                                                                [[0, '#5f6cb8'],[1, '#5f6cb8']]
                                                        )
                                                    })()
                                                },

                                            },
                                            data:deals
                                        }
                                    ]
                                };
                                // 为echarts对象加载数据
                                myChart.setOption(option);
                            }
                    );
                </script>
                <!--end-->
                <p class="font-down">每月用户收益（元）</p>
            </div>
        </div>
        <div class="back-g height60">
            <div class="protitle">
                <div class="progress margin"></div><p style="float: left">风控数据</p> <div class="round margin" style="margin-left: 11px;"></div> <div class="progress margin" style="width:20px;"></div>
            </div>
        </div>
        <div class="risk-control">
            <!--<div style="height:130px;text-align: center;">
                <p class="number-style" style="margin-top: 0px;padding-top:15px;">3,043,577,900</p>
                <div class="h-line" style="margin-top: 5px;"></div>
                <p class="font-style">风险备用金（元）</p>
            </div>-->
            <div class="circle-all" style="height:246px;">
                <ul>
                    <li>
                        <div class="circle-in">
                            <span style="line-height: 120px;font-size: 27px;color:#FFFFFF;">2491.69</span>
                        </div>
                        <p style="margin-top: 20px;font-size: 16px;">计代偿金额(万元)</p>
                    </li>
                    <li>
                        <div class="circle-in">
                            <span style="line-height: 120px;font-size: 27px;color:#FFFFFF;">0</span>
                        </div>
                        <p style="margin-top: 20px;font-size: 16px;">计代偿笔数（笔）</p>
                    </li>
                    <li>
                        <div class="circle-in">
                            <span style="line-height: 120px;font-size: 27px;color:#FFFFFF;">0.0</span>
                        </div>
                        <p style="margin-top: 20px;font-size: 16px;">逾期金额（元）</p>
                    </li>
                    <li>
                        <div class="circle-in">
                            <span style="line-height: 120px;font-size: 27px;color:#FFFFFF;">0</span>
                        </div>
                        <p style="margin-top: 20px;font-size: 16px;">逾期笔数（笔）</p>
                    </li>
                    <li>
                        <div class="circle-in">
                            <span style="line-height: 120px;font-size: 27px;color:#FFFFFF;">0</span>
                        </div>
                        <p style="margin-top: 20px;font-size: 16px;">逾期90天（不含）以上金额（元）</p>
                    </li>
                    <li>
                        <div class="circle-in">
                            <span style="line-height: 120px;font-size: 27px;color:#FFFFFF;">0</span>
                        </div>
                        <p style="margin-top: 20px;font-size: 16px;">逾期90天（不含）以上笔数（笔）</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="back-g height60">
            <div class="protitle">
                <div class="progress margin"></div><p style="float: left">项目数据</p> <div class="round margin" style="margin-left: 11px;"></div> <div class="progress margin" style="width:20px;"></div>
            </div>
        </div>
        <div class="program-data">
            <div class="basic-data">
                <ul>
                    <li>
                        <div style="padding-top: 18px;">
                            <div class="empty-circle" style="margin-left:78px;border:2px #f6af38 solid;"></div>
                            <p class="program-font-down" style="margin-left:12px;margin-right:92px;">借贷余额（元）</p>
                            <p class="program-font-down" style="color:#f15b3a;">1528</p>
                        </div>
                    </li>
                    <li>
                        <div style="padding-top: 18px;">
                            <div class="empty-circle" style="margin-left:78px;border:2px #f6af38 solid;"></div>
                            <p class="program-font-down" style="margin-left:12px;margin-right:20px;">关联关系借款余额（笔）</p>
                            <p class="program-font-down" style="color:#f15b3a;">2,104,085,973.22</p>
                        </div>
                    </li>
                    <li>
                        <div style="padding-top: 18px;">
                            <div class="empty-circle" style="margin-left:78px;border:2px #f6af38 solid;"></div>
                            <p class="program-font-down" style="margin-left:12px;margin-right:92px;">利息余额（元）</p>
                            <p class="program-font-down" style="color:#f15b3a;">1029</p>
                        </div>
                    </li>
                    <li>
                        <div style="padding-top: 18px;">
                            <div class="empty-circle" style="margin-left:78px;border:2px #f6af38 solid;"></div>
                            <p class="program-font-down" style="margin-left:12px;margin-right:20px;">关联关系借款余额（元）</p>
                            <p class="program-font-down" style="color:#f15b3a;">2,248,238,626.78</p>
                        </div>
                    </li>
                    <li>
                        <div style="padding-top: 18px;">
                            <div class="empty-circle" style="margin-left:78px;border:2px #f6af38 solid;"></div>
                            <p class="program-font-down" style="margin-left:12px;margin-right:62px;">借贷余额笔数（笔）</p>
                            <p class="program-font-down" style="color:#f15b3a;">2,248,238,626.78</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="program-data-top border-bot">
                <div class="program-data-topl">
                    <div class="program-datatil tl-center font16">项目类型分布</div>
                    <ul class="">
                        <li>
                            <div class="info-program-name">商票贷</div>
                            <div class="info-program-bar"  >
                                <div class="info-programnum-one"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name" >担保贷</div>
                            <div class="info-program-bar" >
                                <div class="info-programnum-two"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name">信用贷</div>
                            <div class="info-program-bar" >
                                <div class="info-programnum-three"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name">车贷</div>
                            <div class="info-program-bar" >
                                <div class="info-programnum-four"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="program-data-topr">
                    <div class="program-datatil tl-center font16">项目期限分布</div>
                    <ul class="">
                        <li>
                            <div class="info-program-name">0-3个月</div>
                            <div class="info-program-bar">
                                <div class="info-programnum-one"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name" >4-6个月</div>
                            <div class="info-program-bar" data-msg="">
                                <div class="info-programnum-two"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name">7-9个月</div>
                            <div class="info-program-bar">
                                <div class="info-programnum-three"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name">10-12个月</div>
                            <div class="info-program-bar">
                                <div class="info-programnum-four"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
            <div class="program-data-top">
                <div class="program-data-topl">
                    <div class="program-datatil tl-center font16">项目利率分布</div>
                    <ul class="">
                        <li>
                            <div class="info-program-name">9.0%-9.36%</div>
                            <div class="info-program-bar"  >
                                <div class="info-programnum-one"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name" >8.5%-9.0%</div>
                            <div class="info-program-bar" >
                                <div class="info-programnum-two"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name">8.0%-8.5%</div>
                            <div class="info-program-bar" >
                                <div class="info-programnum-three"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name">7.5%-8.0%</div>
                            <div class="info-program-bar" >
                                <div class="info-programnum-four"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="program-data-topr">
                    <div class="program-datatil tl-center font16">项目金额分布</div>
                    <ul class="">
                        <li>
                            <div class="info-program-name">50万以下</div>
                            <div class="info-program-bar"  >
                                <div class="info-programnum-one"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name" >50-100万</div>
                            <div class="info-program-bar"  >
                                <div class="info-programnum-two"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name">100-200万</div>
                            <div class="info-program-bar" >
                                <div class="info-programnum-three"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                        <li>
                            <div class="info-program-name">200-500万</div>
                            <div class="info-program-bar" >
                                <div class="info-programnum-four"></div>
                                <span class="info-program-num"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function(){
                function programNum(){
                    var pWidth="60%";
                    $(".info-program-bar div").css("width",pWidth);
                    $(".info-program-bar .info-program-num").append(pWidth);
                    $('.info-program-bar').live('hover',function(event){
                        if(event.type=='mouseenter'){
                            $(this).children(".info-program-num").show();
                        }else{
                            $(this).children(".info-program-num").hide();
                        }
                    })
                }
                programNum();//进度

            });
        </script>
        <div class="back-g height60">
            <div class="protitle">
                <div class="progress margin"></div><p style="float: left">用户数据</p> <div class="round margin" style="margin-left: 11px;"></div> <div class="progress margin" style="width:20px;"></div>
            </div>
        </div>
        <div class="user-data">
            <div class="user-basic">
                <ul>
                    <li style="margin-left:25px;">
                        <div class="user-img"><img src="../images/nowdata/registernum.png"></div>
                        <div class="basic-info">
                            <p>累计注册人数</p>
                            <p class="font16 colred font60">1227</p>
                            <p>当月注册人数</p>
                            <p class="font16 font60">127</p>
                        </div>
                    </li>

                    <div class="w-line"></div>
                    <li>
                        <div class="user-img"><img src="../images/nowdata/investnum.png"></div>
                        <div class="basic-info">
                            <p>累积出借人数量</p>
                            <p class="font16 colred font60">857</p>
                            <p>当前出借人数量</p>
                            <p class="font16 font60">857</p>
                        </div>

                    </li>
                    <div class="w-line" style="margin-left: -12px;"></div>
                    <li>
                        <div class="user-img"><img src="../images/nowdata/borrownum.png"></div>
                        <div class="basic-info">
                            <p>累计借款人数量</p>
                            <p class="font16 colred font60">1528</p>
                            <p>当前借款人数量</p>
                            <p class="font16 font60">857</p>
                        </div>
                    </li>
                    <div class="w-line" style="margin-left: -16px;"></div>
                    <li style="width:245px;">
                        <div class="user-img"><img src="../images/nowdata/investaver.png"></div>
                        <div class="basic-info user-investnum">
                            <p>人均累计出借金额</p>
                            <p class="font16 colred font60">36656566</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="age-basic">
                <ul>
                    <li>
                        <div class="back-g-short">
                            <div class="protitle">
                                <div class="empty-circle-weight"></div>
                                <p class="font16 font60 fl">年龄分布</p>
                            </div>
                        </div>
                        <div class="age-detail">
                            <div style="height: 32px;font-size: 16px;">
                                <span style="margin-right: 7px;">60后</span>
                                <div class="progress-bar" style="height:10px;margin-right: 7px;">
                                    <div title="" style="background: #f39800;height: 10px;width: 80%;"></div>
                                </div>
                                <span style="color:#f39800;">64%</span>
                            </div>
                            <div style="height: 32px;font-size: 16px;">
                                <span style="margin-right: 7px;">70后</span>
                                <div class="progress-bar" style="height:10px;margin-right: 7px;">
                                    <div title="" style="background: #f39800;height: 10px;width: 39%;"></div>
                                </div>
                                <span style="color:#f39800;">64%</span>
                            </div>
                            <div style="height: 32px;font-size: 16px;">
                                <span style="margin-right: 7px;">80后</span>
                                <div class="progress-bar" style="height:10px;margin-right: 7px;">
                                    <div title="" style="background: #f39800;height: 10px;width: 60%;"></div>
                                </div>
                                <span style="color:#f39800;">64%</span>
                            </div>
                            <div style="height: 32px;font-size: 16px;">
                                <span style="margin-right: 7px;">90后</span>
                                <div class="progress-bar" style="height:10px;margin-right: 7px;">
                                    <div title="" style="background: #f39800;height: 10px;width: 58%;"></div>
                                </div>
                                <span style="color:#f39800;">64%</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="back-g-short">
                            <div class="protitle">
                                <div class="empty-circle-weight"></div>
                                <p style="float: left;font-size: 16px;font-weight:600;">性别分布</p>
                            </div>
                        </div>
                        <div class="age-detail" style="width: 360px;">
                            <div style="height:70px;font-size: 16px;">
                                <span style="width:35px;height: 50px;float: left;margin-right: 16px;"><img src="../images/nowdata/female.png"></span>
                                <div style="height:50px;padding-top: 19px;">
                                    <div class="progress-bar" style="height:10px;margin-right: 7px;">
                                        <div title="" style="background: #e3593b;height: 10px;width: 32.14%;"></div>
                                    </div>
                                    <span style="color:#e3593b;">32.14%</span>
                                </div>
                            </div>
                            <div style="height:70px;font-size: 16px;">
                                <span style="width:35px;height: 50px;float: left;margin-right: 16px;"><img src="../images/nowdata/male.png"></span>
                                <div style="height:50px;padding-top: 19px;">
                                    <div class="progress-bar" style="height:10px;margin-right: 7px;">
                                        <div title="" style="background: #5c88c9;height: 10px;width: 67.86%;"></div>
                                    </div>
                                    <span style="color:#5c88c9;">67.86%</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="clear: both;"></div>
            <div class="map-data">
                <div class="back-g-short" style="width: 924px;">
                    <div class="protitle">
                        <div class="empty-circle-weight"></div>
                        <p style="float: left;font-size: 16px;font-weight:600;">地域分布</p>
                    </div>
                </div>
                <div id="cmap" class="map-detail"></div>
                <script type="text/javascript">
                    require.config({
                        paths: {
                            echarts: '../js/build/dist'
                        }
                    });
                    require(
                            [
                                'echarts',
                                'echarts/chart/map',
                            ],
                            function (ec) {
                                var myChart = ec.init(document.getElementById('cmap'));

                                var amount = [];
                          //      $.ajaxSettings.async = false;

                          //      $.getJSON(ctx+'/website/getAreaMember',function(json){
                          //          amount = json.amount;
                          //      });

                                var option = {
                                    title : {
                                        show:false,
                                        text: '地域分布',
                                        subtext: '',/*截止时间2016.12.31*/
                                        x:'50',
                                        y:10,
                                        backgroundColor:'rgba(96,147,217,1)',
                                        textStyle:
                                        {
                                            fontSize: 14,
                                            fontWeight: '400',
                                            color: '#fff'
                                        }
                                    },
                                    tooltip : {
                                        trigger: 'item'
                                    },
                                    dataRangeHoverLink:true,
                                    grid: {
                                        width:485,
                                        borderWidth: 0,
                                        x:0,
                                        y: 0,
                                        x2:10,
                                        y2: 10
                                    },
                                    dataRange: {
                                        show:false,
                                        min: 0,
                                        max: 16000,/*根据最大最大注册人数，确定最大值域漫游数值*/
                                        x: 'left',
                                        y: 'bottom',
                                        text:['多','少'],
                                        calculable : false
                                    },
                                    series : [
                                        {
                                            name: '注册人数',
                                            type: 'map',
                                            mapType: 'china',
                                            roam:false,
                                            itemStyle:{
                                                normal:{label:{show:true}},
                                                emphasis:{label:{show:true}},
                                                emphasis: {
                                                    color: (function (){
                                                        var zrColor = require('zrender/tool/color');
                                                        return zrColor.getLinearGradient(
                                                                0, 400, 0, 300,
                                                                [[0, '#fed721'],[1, '#fed721']]
                                                        )
                                                    })(),
                                                }
                                            },
                                            data:amount
                                        },
                                    ]
                                };
                                myChart.setOption(option);
                            }
                    );
                </script>
            </div>
            <div class="invest-data">
                <div class="back-g-short" style="width: 924px;">
                    <div class="protitle">
                        <div class="empty-circle-weight"></div>
                        <p style="float: left;font-size: 16px;font-weight:600;">借款人及出借人余额分布</p>
                    </div>
                </div>
                <!--借款人及出借人余额分布-->
                <div class="debit-balance  mg0">
                    <div class="debit-balancel fl">
                        <div id="topTen" class="topTen"></div>
                        <script type="text/javascript">
                            // 路径配置
                            require.config({
                                paths: {
                                    echarts: '../js/build/dist'
                                }
                            });

                            // 使用
                            require(
                                    [
                                        'echarts',
                                        'echarts/chart/pie' // 使用饼状图就加载pie模块
                                    ],
                                    function (ec) {
                                        // 基于准备好的dom，初始化echarts图表
                                        var myChart = ec.init(document.getElementById('topTen'));

                                        var option = {
                                            tooltip : {
                                                show: false,
                                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                                            },

                                            //内圆
                                            calculable : false,//圆边
                                            series : [
                                                {
                                                    name:'全部',
                                                    type:'pie',
                                                    hover:true,
                                                    center : ['50%', 100],
                                                    radius : [20, 60],//直径//内圆
                                                    itemStyle : {
                                                        normal : {
                                                            /*
                                                            label : {
                                                                position : 'out',
                                                                formatter : function (params) {
                                                                    return (params.percent - 0).toFixed(0) + '%'
                                                                }
                                                            },
                                                            */
                                                            labelLine : {
                                                                show : false
                                                            }
                                                        },
                                                        emphasis : {
                                                            label : {
                                                                show : false,
                                                                formatter : "{b}\n{d}%"
                                                            }
                                                        }

                                                    },
                                                    data:[//内圆数据
                                                        {
                                                            value:40,//, name:'前十'
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(248,133,28,1)']]
                                                                        )
                                                                    })()
                                                                }
                                                            }
                                                        },
                                                        {
                                                            value:100,//, name:'全部'
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(255,174,0,1)']]
                                                                        )
                                                                    })()
                                                                }
                                                            }
                                                        }//, name:'全部'
                                                    ]
                                                },


                                                //外圆
                                                {
                                                    name:'全部',
                                                    hover:true,
                                                    type:'pie',
                                                    center : ['50%', 100],//位置
                                                    radius : [62, 66],//直径
                                                    data:[
                                                        {
                                                            value:40,//前十
                                                            name:'40%',//数据占比
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(241,91,58,1)']]
                                                                        )
                                                                    })(),
                                                                    label : {
                                                                        textStyle : {
                                                                            color : 'rgba(0,0,0,0.8)',
                                                                            align : 'center',
                                                                            baseline : 'middle',
                                                                            fontFamily : '微软雅黑',
                                                                            fontSize : 14,
                                                                            fontWeight : 'bolder'
                                                                        }
                                                                    },
                                                                    labelLine : {
                                                                        length : 10,
                                                                        lineStyle : {
                                                                            color : '#f0f',
                                                                            width : 3,
                                                                            type : 'none'
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        },
                                                        {
                                                            value:100,
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(255,255,255,1)']]
                                                                        )
                                                                    })(),
                                                                    labelLine : {
                                                                        length : 10,
                                                                        lineStyle : {
                                                                            color : '#fff',
                                                                            width : 3,
                                                                            type : 'none'
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }

                                                    ]
                                                }


                                            ]
                                        };

                                        // 为echarts对象加载数据
                                        myChart.setOption(option);
                                    }
                            );
                        </script>
                        <p class="font16">前十大借款人待还金额占比</p>
                    </div>
                    <div class="debit-balancer flr">
                        <div id="topTenr" class="topTen"></div>
                        <script type="text/javascript">
                            // 路径配置
                            require.config({
                                paths: {
                                    echarts: '../js/build/dist'
                                }
                            });

                            // 使用
                            require(
                                    [
                                        'echarts',
                                        'echarts/chart/pie' // 使用饼状图就加载pie模块
                                    ],
                                    function (ec) {
                                        // 基于准备好的dom，初始化echarts图表
                                        var myChart = ec.init(document.getElementById('topTenr'));

                                        var option = {
                                            tooltip : {
                                                show: false,
                                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                                            },

                                            //内圆
                                            calculable : false,//圆边
                                            series : [
                                                {
                                                    name:'全部',
                                                    type:'pie',
                                                    hover:true,
                                                    center : ['50%', 100],
                                                    radius : [20, 60],//直径//内圆
                                                    itemStyle : {
                                                        normal : {
                                                            /*
                                                             label : {
                                                             position : 'out',
                                                             formatter : function (params) {
                                                             return (params.percent - 0).toFixed(0) + '%'
                                                             }
                                                             },
                                                             */
                                                            labelLine : {
                                                                show : false
                                                            }
                                                        },
                                                        emphasis : {
                                                            label : {
                                                                show : false,
                                                                formatter : "{b}\n{d}%"
                                                            }
                                                        }

                                                    },
                                                    data:[//内圆数据
                                                        {
                                                            value:10,//, name:'前十'
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(62,153,204,1)']]
                                                                        )
                                                                    })()
                                                                }
                                                            }
                                                        },
                                                        {
                                                            value:100,//, name:'全部'
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(83,178,230,1)']]
                                                                        )
                                                                    })()
                                                                }
                                                            }
                                                        }//, name:'全部'
                                                    ]
                                                },


                                                //外圆
                                                {
                                                    name:'全部',
                                                    hover:true,
                                                    type:'pie',
                                                    center : ['50%', 100],//位置
                                                    radius : [62, 66],//直径
                                                    data:[
                                                        {
                                                            value:10,//前十
                                                            name:'10%',//数据占比
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(42,128,176,1)']]
                                                                        )
                                                                    })(),
                                                                    label : {
                                                                        textStyle : {
                                                                            color : 'rgba(0,0,0,0.8)',
                                                                            align : 'center',
                                                                            baseline : 'middle',
                                                                            fontFamily : '微软雅黑',
                                                                            fontSize : 14,
                                                                            fontWeight : 'bolder'
                                                                        }
                                                                    },
                                                                    labelLine : {
                                                                        length : 10,
                                                                        lineStyle : {
                                                                            color : '#f0f',
                                                                            width : 3,
                                                                            type : 'none'
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        },
                                                        {
                                                            value:100,
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(255,255,255,1)']]
                                                                        )
                                                                    })(),
                                                                    labelLine : {
                                                                        length : 10,
                                                                        lineStyle : {
                                                                            color : '#fff',
                                                                            width : 3,
                                                                            type : 'none'
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }

                                                    ]
                                                }


                                            ]
                                        };

                                        // 为echarts对象加载数据
                                        myChart.setOption(option);
                                    }
                            );
                        </script>
                        <p class="font16">最大单一借款人待还金额占比</p>
                    </div>
                </div>
                <div class="debit-balance  mg0">
                    <div class="debit-balancel fl">
                        <div id="bigTen" class="topTen"></div>
                        <script type="text/javascript">
                            // 路径配置
                            require.config({
                                paths: {
                                    echarts: '../js/build/dist'
                                }
                            });

                            // 使用
                            require(
                                    [
                                        'echarts',
                                        'echarts/chart/pie' // 使用饼状图就加载pie模块
                                    ],
                                    function (ec) {
                                        // 基于准备好的dom，初始化echarts图表
                                        var myChart = ec.init(document.getElementById('bigTen'));

                                        var option = {
                                            tooltip : {
                                                show: false,
                                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                                            },

                                            //内圆
                                            calculable : false,//圆边
                                            series : [
                                                {
                                                    name:'全部',
                                                    type:'pie',
                                                    hover:true,
                                                    center : ['50%', 100],
                                                    radius : [20, 60],//直径//内圆
                                                    itemStyle : {
                                                        normal : {
                                                            /*
                                                             label : {
                                                             position : 'out',
                                                             formatter : function (params) {
                                                             return (params.percent - 0).toFixed(0) + '%'
                                                             }
                                                             },
                                                             */
                                                            labelLine : {
                                                                show : false
                                                            }
                                                        },
                                                        emphasis : {
                                                            label : {
                                                                show : false,
                                                                formatter : "{b}\n{d}%"
                                                            }
                                                        }

                                                    },
                                                    data:[//内圆数据
                                                        {
                                                            value:40,//, name:'前十'
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(248,133,28,1)']]
                                                                        )
                                                                    })()
                                                                }
                                                            }
                                                        },
                                                        {
                                                            value:100,//, name:'全部'
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(255,174,0,1)']]
                                                                        )
                                                                    })()
                                                                }
                                                            }
                                                        }//, name:'全部'
                                                    ]
                                                },


                                                //外圆
                                                {
                                                    name:'全部',
                                                    hover:true,
                                                    type:'pie',
                                                    center : ['50%', 100],//位置
                                                    radius : [62, 66],//直径
                                                    data:[
                                                        {
                                                            value:40,//前十
                                                            name:'40%',//数据占比
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(241,91,58,1)']]
                                                                        )
                                                                    })(),
                                                                    label : {
                                                                        textStyle : {
                                                                            color : 'rgba(0,0,0,0.8)',
                                                                            align : 'center',
                                                                            baseline : 'middle',
                                                                            fontFamily : '微软雅黑',
                                                                            fontSize : 14,
                                                                            fontWeight : 'bolder'
                                                                        }
                                                                    },
                                                                    labelLine : {
                                                                        length : 10,
                                                                        lineStyle : {
                                                                            color : '#f0f',
                                                                            width : 3,
                                                                            type : 'none'
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        },
                                                        {
                                                            value:100,
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(255,255,255,1)']]
                                                                        )
                                                                    })(),
                                                                    labelLine : {
                                                                        length : 10,
                                                                        lineStyle : {
                                                                            color : '#fff',
                                                                            width : 3,
                                                                            type : 'none'
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }

                                                    ]
                                                }


                                            ]
                                        };

                                        // 为echarts对象加载数据
                                        myChart.setOption(option);
                                    }
                            );
                        </script>
                        <p class="font16">最大单户出借余额占比</p>
                    </div>
                    <div class="debit-balancer flr">
                        <div id="bigLoan" class="topTen"></div>
                        <script type="text/javascript">
                            // 路径配置
                            require.config({
                                paths: {
                                    echarts: '../js/build/dist'
                                }
                            });

                            // 使用
                            require(
                                    [
                                        'echarts',
                                        'echarts/chart/pie' // 使用饼状图就加载pie模块
                                    ],
                                    function (ec) {
                                        // 基于准备好的dom，初始化echarts图表
                                        var myChart = ec.init(document.getElementById('bigLoan'));

                                        var option = {
                                            tooltip : {
                                                show: false,
                                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                                            },

                                            //内圆
                                            calculable : false,//圆边
                                            series : [
                                                {
                                                    name:'全部',
                                                    type:'pie',
                                                    hover:true,
                                                    center : ['50%', 100],
                                                    radius : [20, 60],//直径//内圆
                                                    itemStyle : {
                                                        normal : {
                                                            /*
                                                             label : {
                                                             position : 'out',
                                                             formatter : function (params) {
                                                             return (params.percent - 0).toFixed(0) + '%'
                                                             }
                                                             },
                                                             */
                                                            labelLine : {
                                                                show : false
                                                            }
                                                        },
                                                        emphasis : {
                                                            label : {
                                                                show : false,
                                                                formatter : "{b}\n{d}%"
                                                            }
                                                        }

                                                    },
                                                    data:[//内圆数据
                                                        {
                                                            value:10,//, name:'前十'
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(62,153,204,1)']]
                                                                        )
                                                                    })()
                                                                }
                                                            }
                                                        },
                                                        {
                                                            value:100,//, name:'全部'
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(83,178,230,1)']]
                                                                        )
                                                                    })()
                                                                }
                                                            }
                                                        }//, name:'全部'
                                                    ]
                                                },


                                                //外圆
                                                {
                                                    name:'全部',
                                                    hover:true,
                                                    type:'pie',
                                                    center : ['50%', 100],//位置
                                                    radius : [62, 66],//直径
                                                    data:[
                                                        {
                                                            value:10,//前十
                                                            name:'10%',//数据占比
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(42,128,176,1)']]
                                                                        )
                                                                    })(),
                                                                    label : {
                                                                        textStyle : {
                                                                            color : 'rgba(0,0,0,0.8)',
                                                                            align : 'center',
                                                                            baseline : 'middle',
                                                                            fontFamily : '微软雅黑',
                                                                            fontSize : 14,
                                                                            fontWeight : 'bolder'
                                                                        }
                                                                    },
                                                                    labelLine : {
                                                                        length : 10,
                                                                        lineStyle : {
                                                                            color : '#f0f',
                                                                            width : 3,
                                                                            type : 'none'
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        },
                                                        {
                                                            value:100,
                                                            itemStyle : {
                                                                normal : {
                                                                    color : (function (){
                                                                        var zrColor = require('zrender/tool/color');
                                                                        return zrColor.getRadialGradient(
                                                                                300, 200, 110, 300, 200, 140,
                                                                                [[0, 'rgba(255,255,255,1)']]
                                                                        )
                                                                    })(),
                                                                    labelLine : {
                                                                        length : 10,
                                                                        lineStyle : {
                                                                            color : '#fff',
                                                                            width : 3,
                                                                            type : 'none'
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }

                                                    ]
                                                }


                                            ]
                                        };

                                        // 为echarts对象加载数据
                                        myChart.setOption(option);
                                    }
                            );
                        </script>
                        <p class="font16">最大十户出借余额占比</p>
                    </div>
                </div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
</div>
<div style="clear: both"></div>
<div id="footer">
</div>
</body>
</html>
